<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useNavStore } from "@/stores/nav";
import { message } from "ant-design-vue";

const route = useRoute();
const router = useRouter();
const navStore = useNavStore();
const logoUrl =
  "https://public.readdy.ai/ai/img_res/5d093e0002d7aa7d7aa02f3b4e45b80f.jpg";

const currentNav = ref(route.name);
const searchText = ref("");
const showMobileMenu = ref(false);

watch(
  () => route.name,
  (newValue) => {
    currentNav.value = newValue;
  },
);
const navItems = computed(() => navStore.getNav());

const onSearch = (value: string) => {
  if (!value) {
    message.error("请输入搜索关键词");
    return;
  }
  if (window.innerWidth < 768) {
    showMobileMenu.value = false;
  }
  searchText.value = "";
  router.push({
    path: "/search",
    query: {
      k: value,
    },
  });
};

const handleMobileNavClick = (key: any) => {
  currentNav.value = key;
  showMobileMenu.value = false;
};
</script>

<template>
  <nav class="fixed top-0 w-full bg-white shadow-sm z-50">
    <div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
      <!-- Logo和标题 -->
      <div class="flex items-center space-x-2">
        <img
          :src="logoUrl"
          alt="博客Logo"
          class="w-8 h-8 rounded-full object-coverImage"
        />
        <h1 class="text-xl font-bold sm:block">思远博客</h1>
      </div>

      <!-- 桌面导航 -->
      <div class="hidden md:flex items-center space-x-8">
        <router-link
          v-for="item in navItems"
          :key="item.key"
          :to="item.path"
          :class="[
            'cursor-pointer hover:text-blue-600',
            currentNav === item.key ? 'text-blue-600' : 'text-gray-600',
          ]"
          @click="currentNav = item.key"
        >
          {{ item.label }}
        </router-link>
        <a-input-search
          v-model:value="searchText"
          placeholder="搜索文章..."
          class="w-48"
          style="width: 200px"
          @search="onSearch"
        />
      </div>

      <!-- 移动端菜单按钮 -->
      <div class="md:hidden flex items-center">
        <button @click="showMobileMenu = !showMobileMenu" class="p-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <transition name="menu-slide">
      <div
        v-if="showMobileMenu"
        class="md:hidden bg-white shadow-lg absolute w-full left-0"
      >
        <div class="py-3 px-4 space-y-3">
          <router-link
            v-for="item in navItems"
            :key="item.key"
            :to="item.path"
            class="block py-2 px-3 rounded hover:bg-gray-50 transition-colors"
            :class="
              currentNav === item.key
                ? 'text-blue-600 font-medium'
                : 'text-gray-700'
            "
            @click="handleMobileNavClick(item.key)"
          >
            {{ item.label }}
          </router-link>
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索文章..."
            class="w-full mt-2"
            @search="onSearch"
          />
        </div>
      </div>
    </transition>
  </nav>
</template>

<style scoped>
/* 优化过渡效果 */
.menu-slide-enter-active,
.menu-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.menu-slide-enter-from,
.menu-slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
}

.menu-slide-enter-to,
.menu-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
  max-height: 300px;
}

/* 优化移动菜单项样式 */
.router-link-active {
  @apply text-blue-600 bg-blue-50;
}

.ant-input-search .ant-input {
  @apply text-sm;
}

.ant-input-search .ant-input-prefix {
  @apply mr-2;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .ant-input-search {
    width: 100% !important;
  }
}
</style>
